const Model = function(config) {
	var me = this;
	me.wrap = config.wrap;
	me.el = config.el;
	me.wrapHeight = me.wrap.getBoundingClientRect()["height"];
	me.slideHeight = me.el.getBoundingClientRect()["height"];
	
	//console.log(me.wrapHeight,me.slideHeight)

	me.init();
	me.touchStart();
	me.touchMove();
	me.touchEnd();



};
/*
 * old_point代表触摸屏幕时候的起始点
 * touch_move代表手指滑动的距离
 * translate代表元素实际transition的距离
 * old_time代表手指刚刚触摸屏幕时候的时间
 * touch_time代表手指停留在屏幕上面的时间(touchend的时候计算这个时间)
 * velocity代表手指滑动快慢，同时代表了元素滑动的快慢和流畅程度
 * max_slide代表了元素滑到底的距离
 * buffer_speed代表元素到顶或者到底以后，再次下拉的缓冲速度(效果)
 * touch_move_multiply代表手指滑动距离的倍数，因为手指滑动长度毕竟有限
 * brake_distance_ratio手指离开屏幕的时候继续移动的距离
 */
Model.prototype.init = function() {
	var me = this;
	me.old_point = 0;
	me.touch_move = 0;
	me.translate = 0;
	me.old_time = 0;
	me.touch_time = 0;
	me.velocity = 0;
	me.max_slide = me.slideHeight - me.wrapHeight;
	me.buffer_speed = 5;
	me.touch_move_multiply = 1;
	me.brake_distance_ratio = 1;
	
	
	me.currentDis = 0;

	me.old_translate = 0;
	me.stopTime = 0;
	//滑动时运动花费的时间
	me.moveTime = "0.3s";
	
};

Model.prototype.touchStart = function() {
	var me = this;
	me.el.addEventListener("touchstart", function(e) {
		e.stopPropagation();
		me.old_point = e.touches[0].clientY;
		me.old_time = e.timeStamp;
		me.el.style.transitionDuration = "0s";
		var t  = e.timeStamp - me.stopTime; //手指离开屏幕再次点击屏幕之间的间隔，用于计算手指再次点击时元素的偏移
		var dis = me.translate - me.old_translate;
		
		//me.el.style.transform = `translate3D(0,${me.old_translate + dis/parseFloat(me.moveTime) * t/1000}px,0)`;
		
		//console.log( me.old_translate + dis/parseFloat(me.moveTime) * t/1000 )
		
		
		
	});
};

Model.prototype.touchMove = function() {
	var me = this;

	me.el.addEventListener("touchmove", function(e) {
		e.stopPropagation();
		me.touch_move = parseInt(e.touches[0].clientY - me.old_point);
		//移动必须和touch_move相关
		me.currentDis = me.translate + me.touch_move;
		//大于0进行缓冲，并且下拉加载
		if(me.currentDis > 0) {
			me.currentDis /= 4;
		} else if( me.currentDis < -me.max_slide ) {
			me.currentDis = (me.currentDis+me.max_slide)/4 - me.max_slide;
		}
		me.el.style.transform = `translate3D(0, ${me.currentDis}px, 0)`;
		me.stopTime = 0;
		
	});
};

Model.prototype.touchEnd = function() {
	var me = this;

	
	me.el.addEventListener("touchend", function(e) {
		e.stopPropagation();
		me.brake_distance_ratio = 1;
		me.moveTime = "0.3s";
		me.touch_time = e.timeStamp - me.old_time;
		
		me.velocity = parseInt( me.touch_move * 100 / me.touch_time );
		
		//console.log(me.velocity)
		if ( Math.abs(me.velocity) < 40 ) {
			me.velocity = 0;
		}else if ( Math.abs(me.velocity) > 100 ) {
			me.brake_distance_ratio = Math.abs(me.velocity)/20;
			me.moveTime = Math.abs(me.velocity)/150 + "s";
			//console.log(t)
		}
		
		
		me.old_translate = me.translate;
		me.translate = me.translate + me.touch_move + me.velocity * me.brake_distance_ratio; //手指滑动很快时transition距离变长
		


		if(me.translate > 0) {
			me.el.style.transitionDuration = ".6s";
			me.el.transitionTimingFunction = "ease";
			me.el.style.transform = "translate3D(0, 0px, 0)";
			me.translate = 0;
		} else if(me.translate < -me.max_slide) {
			me.el.style.transitionDuration = ".3s";
			me.el.transitionTimingFunction = "ease";
			me.el.style.transform = `translate3D(0, -${me.max_slide}px, 0)`;
			me.translate = -me.max_slide;
		}else {
			me.el.style.transitionDuration = me.moveTime;
			//cubic-bezier(0.333333,0.666667,0.666667,1)
			me.el.style.transitionTimingFunction = "cubic-bezier(0.333333,0.666667,0.666667,1)";
			me.el.style.transform = `translate3D(0, ${me.translate}px, 0)`;
		}
		me.touch_move = 0;
		
		me.stopTime = e.timeStamp;
		
	});

};





const Slide = {
	install(Vue) {
		Vue.prototype.Slide = Model;
	}
}


export default Slide;